<template>
  <div class="main">
    <div class="top">
      <label class="latop"> 卡号头部： </label>
      <el-input
        v-model="cardHead"
        clearable
        class="cardHead"
        placeholder="按卡号头部查询"
      ></el-input>
      <!-- <label class="latop">大客户： </label>
      <el-input
        v-model="cardHead"
        clearable
        class="cardHead"
        placeholder="大客户查询"
      ></el-input> -->
    </div>
    <div class="checkline">
      <el-button
        icon="el-icon-plus"
        type="primary"
        @click="dialogFormVisible = true"
        >添加卡号</el-button
      >
      <label class="lacheck">归属：</label>
      <el-radio v-model="belong" label="1">大客户</el-radio>
      <el-radio v-model="belong" label="2">代理</el-radio>
      <div class="blank"></div>
      <el-button icon="el-icon-search" @click="searchHandle">查询</el-button>
      <el-button icon="el-icon-refresh-right" @click="rebase">重置</el-button>
    </div>

    <el-table
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      border:true
      class="contentbox"
    >
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column label="卡号头部" prop="card_header"></el-table-column>
      <el-table-column label="卡类型" prop="card_type"></el-table-column>
      <el-table-column label="归属" prop="affiliation"></el-table-column>
      <el-table-column label="操作" prop="ID">
        <template slot-scope="scope">
          <el-button @click="edit(scope.row)">编辑</el-button>
          <el-button type="danger" @click="deletehandle(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :page-size="4"
      :current-page.sync="currentPage"
      :page-sizes="[4, 8]"
      layout="total,sizes,prev,pager,next,jumper"
      :hide-on-single-page="false"
      :total="total"
      @size-change="sizeChange"
    ></el-pagination>

    <el-dialog
      title="添加新的卡号"
      :visible.sync="dialogFormVisible"
      width="30%"
      center:true
    >
      <el-form :model="form">
        <el-form-item
          label="卡号头部"
          :label-width="formLabelWidth"
          label-position="right"
        >
          <el-input
            v-model="form.card_header"
            autocomplete="off"
            class="msgbox"
          ></el-input>
        </el-form-item>
        <el-form-item label="卡类型" :label-width="formLabelWidth">
          <el-select v-model="form.card_type" placeholder="请选择卡类型">
            <el-option label="实体卡" value="实体卡"></el-option>
            <el-option label="虚拟卡" value="虚拟卡"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="卡归属" :label-width="formLabelWidth">
          <el-select v-model="form.affiliation" placeholder="请选择卡类型">
            <el-option label="大客户" value="大客户"></el-option>
            <el-option label="合伙人" value="合伙人"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCard">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
//引入封装好的axios请求方法
import { cardManaApi } from "../../api/cardMana";
export default {
  data() {
    return {
      dialogFormVisible: false,
      total: 0,
      pageSize: 4,
      currentPage: 1,
      cardHead: "",
      belong: 0,
      tableData: [],
      form: {
        card_header: "",
        card_type: "",
        affiliation: "",
      },
      formLabelWidth: "120px",
    };
  },
  watch: {
    belong(val) {
      if (val == 1) {
        cardManaApi.findCardNumber({ affiliation: "大客户" }).then((res) => {
          this.tableData = res.data;
          this.total = res.data.length;
        });
      } else {
        cardManaApi.findCardNumber({ affiliation: "合伙人" }).then((res) => {
          this.tableData = res.data;
          this.total = res.data.length;
        });
      }
    },
  },
  methods: {
    rebase() {
      this.flashData();
      this.belong = 0;
      this.cardHead = "";
    },
    searchHandle() {
      cardManaApi.findCardNumber({ card_header: this.cardHead }).then((res) => {
        this.tableData = res.data;
        this.total = res.data.length;
      });
    },
    sizeChange(val) {
      this.pageSize = val;
    },
    addCard() {
      this.dialogFormVisible = false;
      if (this.form.header && this.form.cardType && this.form.affiliation) {
        return;
      }
      cardManaApi
        .addCardNum(this.form)
        .then((res) => {
          this.flashData();
          this.$message({ type: "success", message: "添加成功" });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "你取消了操作",
          });
        });
    },
    edit(e) {
      this.$prompt("请输入新的卡号头部", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputType: "text",
      })
        .then(({ value }) => {
          cardManaApi
            .editCard({ id: e.id, card_header: value })
            .then((res) => {
              this.$message({
                type: "success",
                message: "修改卡号头部成功",
              });
              this.flashData();
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "你取消了操作",
          });
        });
    },
    deletehandle(e) {
      this.$confirm("此操作将永久删除此卡信息，是否继续？", "警告", {
        confirmButtonText: "确定删除",
        type: "warning",
        cancelButtonText: "取消",
      })
        .then(() => {
          cardManaApi.deleteCard({ id: e.id }).then((res) => {
            this.flashData();
          });
          this.$message({ type: "success", message: "删除成功" });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
    flashData() {
      cardManaApi.getAllCard().then((res) => {
        this.tableData = res.data;
        this.total = res.data.length;
      });
    },
  },
  beforeCreate() {
    cardManaApi
      .getAllCard()
      .then((res) => {
        this.tableData = res.data;
        this.total = res.data.length;
      })
      .catch((err) => {
        this.$message({
          type: "info",
          message: "网络好像出了点故障",
        });
      });
  },
};
</script>
<style scoped>
.msgbox {
  max-width: 800px;
}
.contentbox {
  width: 100%;
  padding: 0 25px;
  margin-bottom: 10px;
  text-align: center;
}
.blank {
  flex: 1;
}
.lacheck {
  margin-left: 20px;
}
.checkline {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding-left: 40px;
  padding-right: 50px;
  line-height: 40px;
  margin-bottom: 20px;
}
.top {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  padding: 20px 10px;
  font-weight: 600;
}
.main {
  display: flex;
  flex-direction: column;
  /* outline: 1px solid black; */
  /* margin: 90px 0 0 200px; */
  box-sizing: border-box;
  padding: 10px 20px;
  min-height: 500px;
}
.cardHead {
  width: 200px;
}
.latop {
  margin-left: 30px;
}
</style>>
     
